{% extends "overview/base.html" %}

{% block title %}
  首页
{% endblock %}

{% block external %}
  {% load static %}
  <link rel="stylesheet" type="text/css" href="{% static 'css/overview/index.css' %}"/>
{% endblock %}

{% block main %}
  <div id="index" class="container-fluid">
    <div class="row index-background">
      <div class="col-sm-12">
        <!--心灵鸡汤-->
        <div class="row" style="margin-bottom: 20px;">
          <div class="col-sm-12">
            <p class="text-center" style="color: white; font-size: 30px;">The more diligent, the more fortunate.</p>
          </div>
        </div>
        <!--常大图标-->
        <div class="row" style="margin-bottom: 20px;">
          <div class="col-sm-4 col-sm-offset-4" style="text-align: center;">
            <img src="{% static 'images/overview/index/changda.png' %}" class="img-circle" alt="常州大学" style="width: 100px; height: 100px;"/>
          </div>
        </div>
        <!--注册按钮-->
        {% if not request.user.is_authenticated %}
          <div class="row" style="margin-bottom: 20px;">
            <div class="col-sm-4 col-sm-offset-4" style="text-align: center;">
              <a href="{% url 'users:register' %}"><button type="button" class="btn btn-primary">Register An Account!</button></a>
            </div>
          </div>
        {% endif %}
      </div>
    </div>
    <div class="row" style="background-color: #f5f5f5;">
      <div class="col-sm-6 col-sm-offset-3">
        <!--轮播-->
        <div id="indexCarousel" class="carousel slide">
          <!--轮播项目-->
          <div class="carousel-inner">
            <!--第一个项目的几个快捷方式-->
            <div class="item active">
              <div class="row">
                <div class="col-sm-4">
                  <!--院系部门快捷方式-->
                  <div class="index-carousel-card">
                    <div class="index-carousel-card-header">
                      <h4>院系部门</h4>
                    </div>
                    <div class="index-carousel-card-body">
                      <p><span class="glyphicon glyphicon-globe"></span></p>
                    </div>
                    <div class="index-carousel-card-footer">
                      <a href="{% url 'departments:index' %}"><button type="button" class="btn btn-info">Go!</button></a>
                    </div>
                  </div>
                </div>
                <div class="col-sm-4">
                  <!--留言板快捷方式-->
                  <div class="index-carousel-card">
                    <div class="index-carousel-card-header">
                      <h4>留言板</h4>
                    </div>
                    <div class="index-carousel-card-body">
                      <p><span class="glyphicon glyphicon-comment"></span></p>
                    </div>
                    <div class="index-carousel-card-footer">
                      <a href="{% url 'communications:information' 1 %}"><button type="button" class="btn btn-info">Go!</button></a>
                    </div>
                  </div>
                </div>
                <div class="col-sm-4">
                  <!--用户注册快捷方式-->
                  <div class="index-carousel-card">
                    <div class="index-carousel-card-header">
                      {% if request.user.is_authenticated %}
                        <h4>个人空间</h4>
                      {% else %}
                        <h4>注册</h4>
                      {% endif %}
                    </div>
                    <div class="index-carousel-card-body">
                      <p><span class="glyphicon glyphicon-user"></span></p>
                    </div>
                    <div class="index-carousel-card-footer">
                      {% if request.user.is_authenticated %}
                        <a href="{% url 'users:space' request.user.id %}"><button type="button" class="btn btn-info">Go!</button></a>
                      {% else %}
                        <a href="{% url 'users:register' %}"><button type="button" class="btn btn-info">Go!</button></a>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--轮播导航-->
          <a class="carousel-control left" href="#indexCarousel" data-slide="prev" style="width: 5%; background-image: none;">
            <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="carousel-control right" href="#indexCarousel" data-slide="next" style="width: 5%; background-image: none;">
            <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
{% endblock %}